iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
Software Development

三十天利用Angular與.net Core開發實戰一波系列 第 28

Day 28 AngularTri 實作 - 前端頁面(讀取/編輯/修改/確認/刪除/細節)

  • 分享至 

  • xImage
  •  

後端API完成了以後,可以來串接後端來的資料囉

以下提幾點的蠻實用的開發設計

讀取 (Data Table)

這邊使用到了Angular Material的Data Table來接資料會用到排序(sort)、分頁(pagination)、過濾(filter)

programs.service.ts

public getBackendData(
  ): Observable<any> {
    const getURL = environment.TriBackendAPI + '/Triathlon/GetAllTri';
    return this.http.get<Triathlon>(getURL);
  }
trievent.component.ts
export class TrieventComponent implements OnInit {
  // 定義分頁
  @ViewChild(MatPaginator) paginator: MatPaginator;
  // 定義排序
  @ViewChild(MatSort) sortTable: MatSort;
  //定義Data Table需要的物件來源
  public tridataTable = new MatTableDataSource<Triathlon>(); 
  //資料總數
  public totalCount = 0; 
  //前端Table需要展現的欄位
  displayedColumns: string[] = ['EDIT_BUTTON', 'DELETE_BUTTON', 'Detail', 'date', 'year', 'month', 'day', 'place', 'name', 'organizer', 'location', 'applydate', 'status']; 
  constructor(
    private programService: ProgramsService,
  ) { }

  ngOnInit() {
    this.getTriData();
  }
  getTriData() {
    this.programService.getBackendData()
      .subscribe(
        (response: any) => {
          this.tridataTable.data = response.data;
          this.tridataTable.paginator = this.paginator;
          this.tridataTable.sort = this.sortTable;
          this.totalCount = response.data.length;
        }
        , (error: HttpErrorResponse) => this.programService.HandleError(error)
      );
  }
trievent.component.html
  <div>
    <mat-paginator #paginator [length]="totalCount" [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 15]">
    </mat-paginator>
        <ng-container matColumnDef="year">
          <th mat-header-cell *matHeaderCellDef>year</th>
          <td mat-cell *matCellDef="let row">{{ row.year }}</td>
        </ng-container>
        <ng-container matColumnDef="month">
          <th mat-header-cell *matHeaderCellDef>month</th>
          <td mat-cell *matCellDef="let row">{{ row.month }}</td>
        </ng-container>
      .............
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

編輯/修改/確認/刪除 (Button)

這邊特別用到了Angular的特性,利用ngIf的true or false來做一個具有互動式的修改頁面

  • 利用[dataSource]="tridataTable"的每列row綁定一個Triathlon型別中沒定義的屬性isDisabled
  • 一開始為false,藉由ngIf的特性達編輯/修改/確認互動的感覺
  • 再加上一個刪除按鈕,修改與刪除的前端頁面就完成了
        <ng-container matColumnDef="EDIT_BUTTON">
          <th mat-header-cell *matHeaderCellDef>編輯</th>
          <td mat-cell *matCellDef="let row">
            <button *ngIf=!row.isDisabled mat-mini-fab color="primary"   
            (click)="row.isDisabled=true">
                <span matTooltip="Edit">
                <mat-icon>edit</mat-icon>
              </span>//編輯開關
            </button>
            <button *ngIf=row.isDisabled mat-mini-fab color="warn" 
            (click)="row.isDisabled=false">
                  <span matTooltip="Cancel">
                <mat-icon>clear</mat-icon>
              </span>//取消
            </button>
            <button *ngIf=row.isDisabled mat-mini-fab color="primary    
             (click)="updateTriData(row);row.isDisabled=false">
              <span matTooltip="Confirm">
               <span matTooltip="Confirm">
                <mat-icon>send</mat-icon>
              </span>//修改確認
              </span>
            </button>
          </td>
        </ng-container>
        <ng-container matColumnDef="DELETE_BUTTON">
          <th mat-header-cell *matHeaderCellDef>刪除</th>
          <td mat-cell *matCellDef="let row">
            <button mat-mini-fab color="warn" (click)="deleteTriData(row.id)">
            <mat-icon>delete</mat-icon>//刪除
            </button>
          </td>
        </ng-container>

主頁上的欄位也是用ngIfngModel綁定修改值來實現修改功能

 <ng-container matColumnDef="name">
   <td mat-cell *matCellDef="let row">
      <div *ngIf="row.isDisabled">
         <mat-form-field>
            <input matInput [(ngModel)]="row.name">
         </mat-form-field>
       </div>
       <div *ngIf="!row.isDisabled">
              {{ row.name }}
       </div>
   </td>
  </ng-container>

細節 (Dialog)

利用Dialog可以傳資料的特性,這邊將接回來的比較屬於Deatil的競賽組別資料

  • 主頁面Table新增一個DetailButton,按下後
<button mat-mini-fab color="accent" (click)="openDetailDialog(row.tri_event)"></button>
  • 將Detail資料丟到Detail的component中(TrieventDetailComponent)
##### trievent.component.ts
// 打開detail視窗
  public openDetailDialog(Data: any): void {
    const dialogRef = this.dialog.open(TrieventDetailComponent, {
      width: '1500px',
      data: { pData: Data }
      disableClose: false
    });
  }

接收從主頁來的資料並呈現

trievent-detail.component.ts
 public eventData: Array<EVENT> = new Array<EVENT>(); //來接主頁來的自定義物件
  constructor(
    public dialogRef: MatDialogRef<TrieventDetailComponent>, // 定義dialog
    @Inject(MAT_DIALOG_DATA) public data: any, // 接收從主頁面來的資料
  ) { }
  ngOnInit() {
    this.eventData = this.data.pData; //將主頁來的資料給定eventData
  }
trievent-detail.component.html
  <div class="row col-md-12 col-lg-12">
  <mat-card *ngFor="let results of eventData">
    <mat-card-content>
      <label>組別:</label>
      <h3>{{results.eventgroup}}</h3>
    </mat-card-content>
    <mat-card-content>
      <label>組別名稱</label>
      <h3>{{results.name}}</h3>
    </mat-card-content>
    <mat-card-content>
      <label>比賽日期:</label>
      <h3>{{results.startDate}}</h3>
    </mat-card-content>
  </mat-card>
  ......
</div>

上一篇
Day 27 AngularTri實作-後端Web API
下一篇
Day 29 AngularTri 實作 - 前端頁面(新增/回前頁 / 新增一筆 / 副檔塞入主檔)
系列文
三十天利用Angular與.net Core開發實戰一波32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言